// 底部组建
import './index.less';
import { getImage } from '@/tools'
import { IconFacebook, IconWechat } from '@arco-design/web-react/icon';
import { listContent } from './tools'

const listIcon = [{
  icon: <IconFacebook />
}, {
  icon: <IconFacebook />
}, {
  icon: <IconFacebook />
}, {
  icon: <IconFacebook />
}, {
  icon: <IconFacebook />
}]

function Footer() {
  return (
    <div className='footer-flex'>
      <div className='footer-box'>
        <div className='footer-ml'>
          <div className='footer-img'>
            <img src={getImage('wealth-management', 'don.png')} alt="" />
          </div>
          <div className='footer-text'>©2017-2024 www.hotcoin.com</div>
          <div className='footer-flex'>
            {
              listIcon?.map((res, index) => {
                return (
                  <div key={index} className='footer-item'>
                    {res.icon}
                  </div>
                )
              })
            }
          </div>
        </div>
        <div className='footer-list'>
          {
            listContent?.map(res => {
              return (
                <div key={res?.name}>
                  <div className='footer-text'>
                    {res?.title || ''}
                  </div>
                  <div>
                    {
                      res?.lev?.map(req => {
                        return (
                          <div className='footer-req'>
                            <span>{req?.name || ''}</span>
                            <span>{req?.em ? `: ${req?.em}` : ''}</span>
                          </div>
                        )
                      })
                    }
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    </div>
  )
}

export default Footer